import { useLocation, useNavigate, Navigate } from "react-router-dom";

const authRoute = (MianLayout) => {
    // return 组件
    // return class extends React.Component{}
    return function(...props) {
        // const nav = useNavigate(); // 得到路由跳转方法
        const { pathname } = useLocation();
        const token = localStorage.getItem('token');
        const whiteList = ['/index/home', '/index/order', '/index/order/list']
        if(!token && !whiteList.includes( pathname )) {
            return <Navigate to="/login" />
        }

        return <MianLayout {...props} />
    }
}

export default authRoute;

// hooks 和 高阶组件的区别
// 高阶组件是，想要给这个当前这个组件增加一个父级， 公共逻辑都放到父级，调用组件使用
// hooks是，活交给其他函数去做，我们只需要执行时调用就行了

// 纯粹写函数组件的项目，一般都用hooks
// 类组件不支持 hooks，只能用高阶组件
